<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }


    .nav_head li {

        line-height: 50px;
        background-color: #f5f5f5;
        text-align: center;
        font-size: 20px;
        /*border: 0.5px solid gray;*/
        cursor: pointer;
        overflow: hidden;

    }

    .nav_head li ul li {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-color: white;
        color: black;
        border-collapse: separate;
        /*display: none;*/
    }

    .nav_head li ul li:hover {
        background-color: gainsboro;
    }


</style>
<script>
    $(function () {
        //给盒子中的各个导航项注册点击事件
        $(".nav_head>li").click(function () {
            $(".nav_head>li").children("ul").find("li").hide();
            $(this).children("ul").find("li").show();
        });

    });
</script>
<body>
<ul class="nav_head">
    <li>公司介绍
        <ul>
            <a href="javascript:$('#content').load('b-company.html')">
                <li>公司介绍</li>
            </a>

        </ul>
    </li>
    <li>新闻动态
        <ul>
            <a href="javascript:$('#content').load('b-news.html')">
                <li>新闻管理</li>
            </a>

            <a href="javascript:$('#content').load('b-newsadd.html')">
                <li>新闻新增</li>
            </a>
        </ul>
    </li>
    <li>产品中心
        <ul>
            <a href="javascript:$('#content').load('ProductManage.html')">
                <li>产品管理</li>
            </a>
            <a href="javascript:$('#content').load('ProductUpdate.html')">
            <li>产品新增</li>
            </a>
        </ul>
    </li>
    <li>菜系管理
        <ul>
            <a href="javascript:$('#content').load('CookStyleManage.html')">
                <li>菜系管理</li>
            </a>
            <a href="javascript:$('#content').load('CookStyleUpdate.html')">
                <li>菜系新增</li>
            </a>
        </ul>
    </li>
    <li>在线留言
        <ul>
            <a href="javascript:$('#content').load('onLine.html')">
            <li>留言管理</li>
            </a>
        </ul>
    </li>


</ul>
</body>
</html>